<template>
  <div v-if="!selectMode && !showMode" class="question_list" >
    <QuestionListItem v-if="showQuestion.length > 0" class="item" v-for="(item,index) in showQuestion" :question="item"></QuestionListItem>
    <el-text type="info" style="align-self: start" v-else>这里什么也没有</el-text>
  </div>
  <div v-if="selectMode && !showMode" class="question_list_select" >
    <QuestionListItem @click="selectQuestion(index)" v-if="showQuestion.length > 0" :class="(index==select)?'item_on_select':'item_select'" v-for="(item,index) in showQuestion" :question="item"></QuestionListItem>
    <el-text type="info" style="align-self: start" v-else>这里什么也没有</el-text>
  </div>
  <div v-if="showMode" class="question_list_select" >
    <QuestionListItem @click="emit('show',showQuestion[index])" v-if="showQuestion.length > 0" :class="(index==select)?'item_on_select':'item_select'" v-for="(item,index) in showQuestion" :question="item"></QuestionListItem>
    <el-text type="info" style="align-self: start" v-else>这里什么也没有</el-text>
  </div>
</template>

<script setup lang="ts">

import QuestionListItem from "./QuestionListItem.vue";
import {Question} from "../../types/mytypes";
import {onMounted, ref} from "vue";
let select = ref(-1)
const emit = defineEmits(["select","show"])
const props = defineProps<{
  showQuestion:Question[],
  selectMode?:Boolean,
  showMode?:Boolean
}>()
onMounted(()=>{
  console.log(props.selectMode)
})
const selectQuestion = (index:number)=>{
  select.value = index
  emit("select",props.showQuestion[index])
}
</script>

<style scoped lang="scss">
.question_list{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1px;
  box-sizing: border-box;
  .item{

  }
}

.question_list_select{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1px;
  box-sizing: border-box;
  .item_select:hover{
    cursor: pointer;
    border: #409eff 2px solid;
  }
  .item_on_select{
    border: #409eff 2px solid;
  }
  .item_on_select:hover{
    cursor: pointer;
    border: #409eff 2px solid;
  }
}
</style>